{% extends "zerver/base.html" %}
{% set entrypoint = "landing-page-hello" %}

{% set PAGE_TITLE = "Zulip — organized team chat" %}

{% set PAGE_DESCRIPTION = "Zulip is the only modern team chat app that is designed for both live and asynchronous conversations. Organized to help you collaborate productively and efficiently." %}

{% block customhead %}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% endblock %}

{% block content %}
    {% include 'zerver/landing_nav.html' %}
    <div class="portico-hello-page">
        <div class='body-bg'>
            <div class='body-bg__layer'></div>
        </div>
        <div class="screen-1">
            <h1>Organized team&nbsp;chat</h1>
            <div class='h1-subheader'>
                The calmer, more efficient way to work
            </div>
            <div class='appshot-1'>
                <picture>
                    <!-- dark theme is only with webp images, since webp support was at the same time or earlier than prefers-color-scheme https://caniuse.com/?search=prefers-color-scheme https://caniuse.com/webp -->
                    <source class='appshot-1__img'
                      type="image/webp"
                      srcset="{{ static('images/landing-page/hello/generated/screen-1-dark-1x.webp') }},
                      {{ static('images/landing-page/hello/generated/screen-1-dark-2x.webp') }} 2x,
                      {{ static('images/landing-page/hello/generated/screen-1-dark-3x.webp') }} 3x"
                      media="(min-width: 941px) and (prefers-color-scheme: dark)"/>
                    <source class='appshot-1__img'
                      type="image/webp"
                      srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-dark-1x.webp') }},
                      {{ static('images/landing-page/hello/generated/screen-1-mobile-dark-2x.webp') }} 2x,
                      {{ static('images/landing-page/hello/generated/screen-1-mobile-dark-3x.webp') }} 3x"
                      media="(max-width: 940px) and (prefers-color-scheme: dark)"/>
                    <source class='appshot-1__img'
                      type="image/webp"
                      srcset="{{ static('images/landing-page/hello/generated/screen-1-1x.webp') }},
                      {{ static('images/landing-page/hello/generated/screen-1-2x.webp') }} 2x,
                      {{ static('images/landing-page/hello/generated/screen-1-3x.webp') }} 3x"
                      media="(min-width: 941px)"/>
                    <source class='appshot-1__img'
                      type="image/webp"
                      srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-1x.webp') }},
                      {{ static('images/landing-page/hello/generated/screen-1-mobile-2x.webp') }} 2x,
                      {{ static('images/landing-page/hello/generated/screen-1-mobile-3x.webp') }} 3x"
                      media="(max-width: 940px)"/>
                    <source class='appshot-1__img'
                      srcset="{{ static('images/landing-page/hello/generated/screen-1-mobile-1x.jpg') }},
                      {{ static('images/landing-page/hello/generated/screen-1-mobile-2x.jpg') }} 2x,
                      {{ static('images/landing-page/hello/generated/screen-1-mobile-3x.jpg') }} 3x"
                      media="(max-width: 940px)"/>
                    <img alt="" class='appshot-1__img' src="{{ static('images/landing-page/hello/generated/screen-1-1x.jpg') }}"
                      srcset="{{ static('images/landing-page/hello/generated/screen-1-1x.jpg') }},
                      {{ static('images/landing-page/hello/generated/screen-1-2x.jpg') }} 2x,
                      {{ static('images/landing-page/hello/generated/screen-1-3x.jpg') }} 3x"/>
                </picture>
                <div class="cta-buttons">
                    <a href="/try-zulip/">
                        <i class="background-activity-icon"></i>
                        Try Zulip now
                    </a>
                    <a href="/communities/">
                        <i class="visibility-icon"></i>
                        See it in use
                    </a>
                    <a href="/new/">
                        <i class="add-box-icon"></i>
                        Create organization
                    </a>
                </div>
            </div>
            <div class="client-logos">
                <div class='client-logos__logo_akamai'></div>
                <div class='client-logos__logo_tum'></div>
                <div class='client-logos__logo_wikimedia'></div>
                <div class='client-logos__logo_rust'></div>
                <div class='client-logos__logo_dr_on_demand'></div>
                <div class='client-logos__logo_maria'></div>
            </div>
        </div>
        <div class="screen-2">
            <div class="screen-2__container">
                <div class="screen-2__content">
                    <h2 class="screen-2__header">Efficient communication</h2>
                    <div class="screen-2__desc">
                        Unlike other chat apps, Zulip lets you read and respond to&nbsp;every message <em>in&nbsp;context</em>, no&nbsp;matter when it&nbsp;was sent. Maintain your <em>focus</em> and catch up&nbsp;on&nbsp;your own time <em>without stress</em>, reading just the&nbsp;topics <em>you care about</em>.
                    </div>
                    <div class="quote">
                        <div class="quote__text">
                            Zulip&rsquo;s <strong>threading model</strong> makes it so&nbsp;much easier to <strong>manage my&nbsp;team</strong>... As&nbsp;a&nbsp;leader, <strong>in&nbsp;just a&nbsp;few minutes</strong> I&nbsp;can get an&nbsp;overview over what&rsquo;s going on and see where my&nbsp;attention is&nbsp;needed.
                            <div class="quote__text-tail"></div>
                        </div>
                        <div class="quote__source">
                            <a href="/case-studies/idrift/">Case study with
                            <strong>Gaute Lund</strong></a>,
                            <i>co-founder of iDrift AS</i>
                        </div>
                    </div>
                </div>
                <div class="appshot-2">
                    <picture>
                        <!-- dark theme is only with webp images, since webp support was at the same time or earlier than prefers-color-scheme https://caniuse.com/?search=prefers-color-scheme https://caniuse.com/webp -->
                        <source class='appshot-2__img'
                          type="image/webp"
                          srcset="{{ static('images/landing-page/hello/generated/screen-2-dark-1x.webp') }},
                          {{ static('images/landing-page/hello/generated/screen-2-dark-2x.webp') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-2-dark-3x.webp') }} 3x"
                          media="(min-width: 941px) and (prefers-color-scheme: dark)"/>
                        <source class='appshot-2__img'
                          type="image/webp"
                          srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-dark-1x.webp') }},
                          {{ static('images/landing-page/hello/generated/screen-2-mobile-dark-2x.webp') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-2-mobile-dark-3x.webp') }} 3x"
                          media="(max-width: 940px) and (prefers-color-scheme: dark)"/>
                        <source class='appshot-2__img'
                          type="image/webp"
                          srcset="{{ static('images/landing-page/hello/generated/screen-2-1x.webp') }},
                          {{ static('images/landing-page/hello/generated/screen-2-2x.webp') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-2-3x.webp') }} 3x"
                          media="(min-width: 941px)"/>
                        <source class='appshot-2__img'
                          type="image/webp"
                          srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.webp') }},
                          {{ static('images/landing-page/hello/generated/screen-2-mobile-2x.webp') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-2-mobile-3x.webp') }} 3x"
                          media="(max-width: 940px)"/>
                        <source class='appshot-2__img'
                          srcset="{{ static('images/landing-page/hello/generated/screen-2-mobile-1x.jpg') }},
                          {{ static('images/landing-page/hello/generated/screen-2-mobile-2x.jpg') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-2-mobile-3x.jpg') }} 3x"
                          media="(max-width: 940px)"/>
                        <img alt="" class='appshot-2__img'
                          src="{{ static('images/landing-page/hello/generated/screen-2-1x.jpg') }}"
                          srcset="{{ static('images/landing-page/hello/generated/screen-2-1x.jpg') }},
                          {{ static('images/landing-page/hello/generated/screen-2-2x.jpg') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-2-3x.jpg') }} 3x"/>
                    </picture>
                </div>
            </div>
        </div>
        <div class="screen-3">
            <div class="screen-3__container">
                <div class="screen-3__content">
                    <h2 class="screen-3__header">Collaboration at scale</h2>
                    <div class="screen-3__desc">
                        Zulip helps teams of&nbsp;all sizes be <em>more productive</em> together, from a&nbsp;few friends hacking on&nbsp;a&nbsp;new idea, to&nbsp;<em>globally distributed</em> organizations with hundreds of&nbsp;people tackling the world&rsquo;s hardest problems.
                    </div>
                    <div class="quote">
                        <div class="quote__text">
                            Zulip has the <strong>best user experience</strong> of&nbsp;all the chat apps I&rsquo;ve tried...  It&nbsp;is&nbsp;the only app that makes hundreds of&nbsp;conversations <strong>manageable</strong>.
                            <div class="quote__text-tail"></div>
                        </div>
                        <div class="quote__source">
                            <a href="/case-studies/tum/">Case study with
                            <strong>Tobias Lasser</strong></a>,
                            <i>Technical University of
                            Munich</i>
                        </div>
                    </div>
                </div>
                <div class="appshot-3">
                    <picture>
                        <!-- dark theme -->
                        <source class='appshot-3-1__img'
                          type="image/webp"
                          media='(prefers-color-scheme: dark)'
                          srcset="{{ static('images/landing-page/hello/generated/screen-3-1-dark-1x.webp') }},
                          {{ static('images/landing-page/hello/generated/screen-3-1-dark-2x.webp') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-3-1-dark-3x.webp') }} 3x"/>
                        <source class='appshot-3-1__img'
                          type="image/webp"
                          srcset="{{ static('images/landing-page/hello/generated/screen-3-1-1x.webp') }},
                          {{ static('images/landing-page/hello/generated/screen-3-1-2x.webp') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-3-1-3x.webp') }} 3x"/>
                        <img alt="" class='appshot-3-1__img'
                          src="{{ static('images/landing-page/hello/generated/screen-3-1-1x.jpg') }}"
                          srcset="{{ static('images/landing-page/hello/generated/screen-3-1-1x.jpg') }},
                          {{ static('images/landing-page/hello/generated/screen-3-1-2x.jpg') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-3-1-3x.jpg') }} 3x"/>
                    </picture>
                    <picture>
                        <!-- dark theme -->
                        <source class='appshot-3-2__img'
                          type="image/webp"
                          media='(prefers-color-scheme: dark)'
                          srcset="{{ static('images/landing-page/hello/generated/screen-3-2-dark-1x.webp') }},
                          {{ static('images/landing-page/hello/generated/screen-3-2-dark-2x.webp') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-3-2-dark-3x.webp') }} 3x"/>
                        <source class='appshot-3-2__img'
                          type="image/webp"
                          srcset="{{ static('images/landing-page/hello/generated/screen-3-2-1x.webp') }},
                          {{ static('images/landing-page/hello/generated/screen-3-2-2x.webp') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-3-2-3x.webp') }} 3x"/>
                        <img alt="" class='appshot-3-2__img'
                          src="{{ static('images/landing-page/hello/generated/screen-3-2-1x.jpg') }}"
                          srcset="{{ static('images/landing-page/hello/generated/screen-3-2-1x.jpg') }},
                          {{ static('images/landing-page/hello/generated/screen-3-2-2x.jpg') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-3-2-3x.jpg') }} 3x"/>
                    </picture>
                </div>
            </div>
        </div>
        <div class="screen-4">
            <div class="screen-4__container">
                <div class="screen-4__content">
                    <h2 class="screen-4__header">Enterprise ready</h2>
                    <div class="screen-4__desc">
                        <p>
                            Take charge of&nbsp;your mission-critical communications with Zulip&rsquo;s reliable <a href="/for/open-source/">100% free and open-source software</a>, with no&nbsp;vendor lock-in. You can count on&nbsp;our industry-leading <a href="/security/">security practices</a> to&nbsp;keep your data safe.
                        </p>
                        <p>
                            When you <a href="/self-hosting/">self-host Zulip</a>, you get all the features of&nbsp;our cloud offering, plus ultimate control and compliance.
                        </p>
                    </div>
                    <div class="screen-4__tags">
                        <a href="https://zulip.readthedocs.io/en/stable/production/authentication-methods.html">SAML authentication</a>
                        <a href="https://zulip.readthedocs.io/en/stable/production/authentication-methods.html#synchronizing-data">LDAP sync</a>
                        <a href="/help/export-your-organization">Import & export tools</a>
                        <a href="/help/roles-and-permissions">Fine-grained permissions</a>
                        <a href="https://zulip.readthedocs.io/en/stable/production/settings.html">Extensive configuration</a>
                        <a href="/integrations/">100s of integrations</a>
                        <a href="/integrations/doc/slack_incoming">Slack-compatible webhooks</a>
                        <a href="/help/gdpr-compliance">GDPR compliance</a>
                        <a href="/help/message-retention-policy">Retention policies</a>
                    </div>
                </div>
                <div class="appshot-4">
                    <picture>
                        <!-- dark theme -->
                        <source class='appshot-4__img'
                          type="image/webp"
                          media='(prefers-color-scheme: dark)'
                          srcset="{{ static('images/landing-page/hello/generated/screen-4-dark-1x.webp') }},
                          {{ static('images/landing-page/hello/generated/screen-4-dark-2x.webp') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-4-dark-3x.webp') }} 3x"/>
                        <source class='appshot-4__img'
                          type="image/webp"
                          srcset="{{ static('images/landing-page/hello/generated/screen-4-1x.webp') }},
                          {{ static('images/landing-page/hello/generated/screen-4-2x.webp') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-4-3x.webp') }} 3x"/>
                        <img alt="" class='appshot-4__img'
                          src="{{ static('images/landing-page/hello/generated/screen-4-1x.jpg') }}"
                          srcset="{{ static('images/landing-page/hello/generated/screen-4-1x.jpg') }},
                          {{ static('images/landing-page/hello/generated/screen-4-2x.jpg') }} 2x,
                          {{ static('images/landing-page/hello/generated/screen-4-3x.jpg') }} 3x"/>
                    </picture>
                </div>
            </div>
        </div>
        <div class="screen-5">
            <div class="screen-5__container">
                <h2 class="screen-5__header">
                    Learn how Zulip can help your organization!
                </h2>
                <div class='screen-5__quotes'>
                    <div class="quote">
                        <div class="quote__text">
                            <div class="quote__text-industry">
                                <a href="/for/business/">Business</a>
                                <span class="quote__text-industry-icon quote-business-icon"></span>
                            </div>
                            Zulip is everything Slack is, but it's <strong>smarter</strong> and more powerful... There's even support for getting messages from Slack and IRC
                            <div class="quote__text-tail"></div>
                        </div>
                        <div class="quote__source">
                            <a href="https://www.theregister.com/2021/07/28/zulip_open_source_chat_collaboration_software/">Review in <strong>The Register</strong></a>
                        </div>
                    </div>
                    <div class="quote">
                        <div class="quote__text">
                            <div class="quote__text-industry">
                                <a href="/for/open-source/">Open source</a>
                                <span class="quote__text-industry-icon quote-open-source-icon"></span>
                            </div>
                            Rust development would not be <strong>moving at the pace</strong> that it has been without Zulip...
                            <div class="quote__text-tail"></div>
                        </div>
                        <div class="quote__source">
                            <a href="https://www.rust-lang.org/governance/teams/lang"><strong>Josh Triplett</strong></a>,<i class="quote__source-title">Rust Language team co-lead</i>
                        </div>
                    </div>
                    <div class="quote">
                        <div class="quote__text">
                            <div class="quote__text-industry">
                                <a href="/for/education/">Education</a>
                                <span class="quote__text-industry-icon quote-education-icon"></span>
                            </div>
                            Zulip’s topics have made it much easier for me to keep things <strong>coherent</strong>...
                            <div class="quote__text-tail">
                            </div>
                        </div>
                        <div class="quote__source">
                            <a href="/case-studies/ucsd/"><strong>Kiran S. Kedlaya</strong></a>,<i class="quote__source-title">Professor of Mathematics at UCSD</i>
                        </div>
                    </div>
                    <div class="quote">
                        <div class="quote__text">
                            <div class="quote__text-industry">
                                <a href="/for/research/">Research</a>
                                <span class="quote__text-industry-icon quote-research-icon"></span>
                            </div>
                            The excellent LaTeX rendering and clever threading make it far <strong>superior to email</strong> and Slack
                            <div class="quote__text-tail">
                            </div>
                        </div>
                        <div class="quote__source">
                            <a href="https://twitter.com/TomGur/status/1294322062274842624"><strong>Tom Gur</strong></a>,<i class="quote__source-title">Associate Professor at Warwick</i>
                        </div>
                    </div>
                    <div class="quote">
                        <div class="quote__text">
                            <div class="quote__text-industry">
                                <a href="/for/events/">Events</a>
                                <span class="quote__text-industry-icon quote-events-icon"></span>
                            </div>
                            With Zulip, questions or ideas were <strong>spread openly</strong>...
                            <div class="quote__text-tail"></div>
                        </div>
                        <div class="quote__source">
                            <a href="https://perso.univ-rennes1.fr/christophe.ritzenthaler/"><strong>Christophe Ritzenthaler</strong></a>,<i class="quote__source-title">Executive Director of CIMPA</i>
                        </div>
                    </div>
                    <div class="quote">
                        <div class="quote__text">
                            <div class="quote__text-industry">
                                <a href="/for/communities/">Communities</a>
                                <span class="quote__text-industry-icon quote-communities-icon"></span>
                            </div>
                            No other tool has a user experience that <strong>scales</strong> to a community of our size...
                            <div class="quote__text-tail">
                            </div>
                        </div>
                        <div class="quote__source">
                            <a href="/case-studies/recurse-center/"><strong>Nick Bergson-Shilcock</strong></a>,<i class="quote__source-title">CEO of Recurse Center</i>
                        </div>
                    </div>
                </div>
                <div class="screen-5__badges">
                    <a class="screen-5__badge-getapp" href="https://www.getapp.com/collaboration-software/web-collaboration/category-leaders/">
                    <img alt="" src="https://capterra.s3.amazonaws.com/assets/images/gdm-badges/ga-category_leaders-2023.png"/>
                    </a>
                    <a class="screen-5__badge-capterra" href="https://www.capterra.com/p/197945/Zulip/">
                    <img alt="" src="{{ static('images/landing-page/hello/capterra-2023.png') }}"/>
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% include 'zerver/footer.html' %}
{% endblock %}
